<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="成品加工单编码" class="myform-item">
          <div style="display: flex">
            <el-input
              v-model="form.processing_code"
              placeholder="请输入成品加工单编码"
              @keyup.enter.native="onSearch"
              clearable
              style="width: 400px; margin-right: 20px"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="SKU编码" class="myform-item">
          <div style="display: flex">
            <el-input
              v-model="form.sku_code"
              @keyup.enter.native="onSearch"
              placeholder="请输入SKU编码"
              clearable
              style="width: 400px; margin-right: 20px"
            ></el-input>
            <el-button
              style="margin-right: 20px"
              type="primary"
              size="default"
              @click="onSearch"
              >查询</el-button
            >
<!--            <el-upload class="upload-demo" action="/" accept=".xls, .xlsx" :before-upload="beforeupload">-->
<!--              <el-button type="danger">导入文件</el-button>-->
<!--            </el-upload>-->
          </div>
        </el-form-item>
      </div>
      <el-form-item>
        <!-- <el-button
          style="margin-top: 50px"
          type="primary"
          size="default"
          @click="dialogTableVisibleRFID = true"
          >查询RFID</el-button
        > -->
        <!-- <el-button
          style="margin-top: 50px"
          type="primary"
          size="default"
          @click="dialogTableVisibleQCMian = true"
          >免QC质检</el-button
        > -->
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="工厂名" align="center" prop="factory_name">
      </el-table-column>
      <el-table-column
        label="成品加工单编码"
        align="center"
        prop="processing_code"
      >
      </el-table-column>
      <el-table-column label="SKU编码" align="center" prop="sku_code">
      </el-table-column>
      <el-table-column label="款名" align="center" prop="type_name">
      </el-table-column>
      <el-table-column label="款号" align="center" prop="type_no">
      </el-table-column>
      <el-table-column label="颜色编码" align="center" prop="color_code">
      </el-table-column>
      <el-table-column label="尺码编码" align="center" prop="size_code">
      </el-table-column>
      <el-table-column label="导入时间" align="center" prop="createtime">
      </el-table-column>
      <el-table-column label="已打印/总数" align="center" prop="zongnum">
        <template slot-scope="{ row }">
          {{ row.dayinnum }} /
          <span style="font-size: 18px">{{
            Number(row.zongnum) + Number(row.yuchushu)
          }}</span>
          (
          <span>{{ row.zongnum }}</span>
          <span style="font-size: 12px">(原)</span> +
          <span style="color: red">{{ row.yuchushu }}</span
          ><span style="font-size: 12px">(溢)</span> )
        </template>
      </el-table-column>
      <el-table-column label="溢装比" align="center" prop="overflow">
        <template slot-scope="{ row }">
          {{ Number(row.overflow) * 100 }}%
        </template>
      </el-table-column>
      <el-table-column label="增裁" align="center" prop="lou_num">
      </el-table-column>
      <el-table-column label="是否已发工厂" align="center" prop="f_status">
        <template slot-scope="{ row }">
          {{ row.f_status == 0 ? "未发工厂" : "已发工厂" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="onLook(row)">查看</el-button>
          <el-button type="text" @click="onComplementVisible(row, 1)"
            >作废补码</el-button
          >
          <el-button type="text" v-if="row.source_type !=5 && row.source_type !=6" @click="onComplementVisible(row, 2)"
            >增裁补码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="WorkingSchedule-fsgc">
      <el-button
        type="primary"
        @click="postSetprocessingfa"
        :disabled="ids.length == 0"
        >发送工厂</el-button
      >
    </div>
    <pagination
      style="clear: both"
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postCodegetPocessinglist"
    />
    <el-dialog
      title="增裁补码"
      :visible.sync="dialogVisibleB"
      width="800px"
      :before-close="handleCloseR"
    >
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <div>成品加工单：{{ row.processing_code }}</div>
          <div>款号：{{ row.type_no }}</div>
          <div>款名：{{ row.type_name }}</div>
        </div>
        <el-table
          height="300"
          :data="tableReturn"
          border
          size="mini"
          style="width: 100%"
          ref="textDocRef"
          @selection-change="handleSelectionChangeTH"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column prop="type_no" align="center" label="款号">
          </el-table-column> -->
          <!-- <el-table-column prop="type_name" align="center" label="款名">
          </el-table-column> -->
          <el-table-column prop="sku_code" align="center" label="SKU">
          </el-table-column>
          <el-table-column prop="num" align="center" label="增裁补码数量">
            <template slot-scope="{ row, $index }">
              <el-input
                type="number"
                v-model="row.num"
                placeholder="0"
                size="mini"
                @input="onInput($event, row, $index)"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseR" size="mini">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!multipleSelection.length"
          @click="onOKBao"
          :loading="loading"
          size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="RFID"
      :visible.sync="complementVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <div class="cancellationdialogVisible">
        <div>
          <div>成品加工单编码：{{ row.processing_code }}</div>
          <div>SKU编码：{{ row.sku_code }}</div>
          <div>款名：{{ row.type_name }}</div>
        </div>
        <div>
          <div>款号：{{ row.type_no }}</div>
          <div>颜色编码：{{ row.color_code }}</div>
          <div>尺码编码：{{ row.size_code }}</div>
        </div>
        <div>
          <div>可作废补码数量：{{ row.kebushu }}</div>
        </div>
        <div>
          <div>数量：</div>
          <el-input
            v-model="complement.num"
            type="number"
            placeholder="请输入生成RFID的数量"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="complementVisible = false">取 消</el-button>
        <el-button type="danger" @click="onConfirmComplement()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="查看RFID流程"
      :visible.sync="dialogTableVisibleRFID"
      :close-on-click-modal="false"
      width="40%"
    >
      <div class="rfidmode">
        <el-input placeholder="请输入RFID" v-model="rfiddata"></el-input>
        <el-button
          style="margin-left: 20px"
          type="primary"
          size="default"
          @click="onSearchRFID"
          >查询</el-button
        >
      </div>
      <el-timeline style="margin-top: 40px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <el-dialog
      title="免QC质检"
      :visible.sync="dialogTableVisibleQCMian"
      :close-on-click-modal="false"
      width="40%"
    >
      <div class="rfidmode">
        <el-input
          placeholder="请输入成品加工单号编码"
          v-model="processing_code"
        ></el-input>
      </div>
      <el-button
        slot="footer"
        style="margin-left: 20px"
        type="primary"
        size="default"
        :disabled="!processing_code"
        
        @click="onNoQC"
        >确定免除</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import {
  postCodegetPocessinglist,
  postCodePusetprocessingnumber,
  uploadCodeProcessingimport,
  postSetprocessingfa,
  postCodeGetnumber,
  postAdminCodeSetQcPass,
  postAdminCodeSetshenqing
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      rfiddata: "",
      loading: false,
      processing_code: "",
      form: {
        processing_code: "",
        sku_code: "",
        page: 1,
        size: 10,
      },
      row: {},
      cancellation: {
        strnumber: "",
        endnumber: "",
      },
      complement: {
        num: "",
      },
      tableReturn: [],
      multipleSelection: [], //选中
      complementVisible: false,
      dialogTableVisibleRFID: false, // RFID窗口
      dialogTableVisibleQCMian: false, // 免QC质检
      dialogVisibleB: false,
      tableData: [],
      total: 1,
      ids: [], // 选择的列ID
      activities: []
    };
  },
  activated() {
    let form = this.form;
    this.postCodegetPocessinglist(form);
  },
  methods: {
    handleSelectionChangeTH(val) {
      this.multipleSelection = val;
    },
    handleCloseR() {
      this.row = "";
      this.tableReturn = [];
      this.multipleSelection = [];
      this.dialogVisibleB = false;
    },
    onInput(e, row, index) {
      e = e.replace(/[^0-9.]/g, "");
      let { tableReturn, multipleSelection } = this;
      let tmpObj = tableReturn[index];
      tmpObj.num = e;
      this.$set(this.tableReturn, index, tmpObj);
      for (let idx = 0; idx < multipleSelection.length; idx++) {
        if (multipleSelection[idx] == row) {
          multipleSelection[idx] = row;
        }
      }
      this.multipleSelection = multipleSelection;
    },
    // 报次数
    async onBao(row) {
      this.row = row;
      let obj = {
        processing_code: row.processing_code,
        page:1,
        size:100000
      };
      let res = await postCodegetPocessinglist(obj);
      let tableReturn = res.data;
      tableReturn = tableReturn.map((e) => {
        e.num = 0;
        return e;
      });
      this.tableReturn = tableReturn;
      this.multipleSelection = [];
      this.dialogVisibleB = true;
    },
    // 报次数确认
    async onOKBao() {
      this.loading = true;
      let { multipleSelection } = this;
      let arrlist = []
      for (let index = 0; index < multipleSelection.length; index++) {
        let data = multipleSelection[index];
        let obj = {
          id:data.id,
          num:data.num
        }
        arrlist.push(obj)
      }
      let obj = {
        arrlist,
      };
      try {
        let res = await postAdminCodeSetshenqing(obj);
        let form = this.form;
        this.postCodegetPocessinglist(form);
        this.$message.success("成功");
        this.loading = false;
        this.handleCloseR();
      } catch (error) {
        this.loading = false;
      }
    },
    // 免qc检查
    onNoQC() {
      console.log("免qc检查");
      let that = this;
      let processing_code = this.processing_code;
      let obj = {
        processing_code,
      };

      postAdminCodeSetQcPass(obj).then((res) => {
        that.$message({
          type: "success",
          message: "操作成功!",
        });
        let form = this.form;
        that.postCodegetPocessinglist(form);
        that.dialogTableVisibleQCMian = false;
      });
    },
    // rfid查询
    onSearchRFID() {
      if (this.rfiddata) {
        let obj = {
          number: this.rfiddata,
        };
        postCodeGetnumber(obj).then((res) => {
          console.log("rfid查询", res);
          let data = res.data;
          let arr = [];
          if (data.createtime) {
            let obj = {
              content: "生成",
              timestamp: data.createtime,
            };
            arr.push(obj);
          }
          if (data.printing_time) {
            let obj = {
              content: "打印",
              timestamp: data.printing_time,
            };
            arr.push(obj);
          }
          if (data.fa_time) {
            let obj = {
              content: "出厂",
              timestamp: data.fa_time,
            };
            arr.push(obj);
          }
          if (data.qc && data.qc.length) {
            data.qc.forEach((e) => {
              let obj = {
                content: `QC(${e.qc_user})已检 ${
                  e.status == 1 ? "合格" : "不合格"
                }`,
                timestamp: e.qc_time,
              };
              arr.push(obj);
            });
          }
          if (data.qt && data.qt.length) {
            data.qt.forEach((e) => {
              let obj = {
                content: `仓检(${e.qc_user})已检 ${
                  e.status == 1 ? "合格" : "不合格"
                }`,
                timestamp: e.qc_time,
              };
              arr.push(obj);
            });
          }
          if (data.ware_time) {
            let obj = {
              content: "入库",
              timestamp: data.ware_time,
            };
            arr.push(obj);
          }
          if (data.delivery_time) {
            let obj = {
              content: "出库",
              timestamp: data.delivery_time,
            };
            arr.push(obj);
          }
          this.activities = arr;
        });
      }
    },
    postSetprocessingfa() {
      let ids = this.ids;
      this.$confirm("确定将选择成品加工单编码发送工厂?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postSetprocessingfa(ids).then((res) => {
            let form = this.form;
            this.postCodegetPocessinglist(form);
            this.$message({
              type: "success",
              message: "发送成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发送",
          });
        });
    },
    // 选中的
    handleSelectionChange(val) {
      console.log("选中的", val);
      let arr = [];
      val.forEach((element) => {
        arr.push(element.id);
      });
      this.ids = arr;
    },
    // 导入文件
    beforeupload(file) {
      this.loading = true;
      console.log("file------->", file);
      uploadCodeProcessingimport(file)
        .then((res) => {
          console.log("导入----》", res);
          this.loading = false;
          let form = this.form;
          this.postCodegetPocessinglist(form);
        })
        .catch((err) => {
          this.loading = false;
        });
      return false;
    },
    async onComplementVisible(row, type) {
      if (type == 2) {
        this.loading = true
        this.row = row;
        this.type = type;
        try {
          await this.onBao(row)
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      } else {
        this.row = row;
        this.complementVisible = true;
        this.type = type;
      }
    },
    // 查询
    onSearch() {
      let form = this.form;
      form.page = 1;
      form.size = 10;
      this.postCodegetPocessinglist(form);
    },
    // 生成rfid
    onConfirmComplement() {
      let { type, complement } = this;
      if (complement.num) {
        this.$confirm(`确定${type == 1 ? "生成" : "添加"}RFID?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            complement.id = this.row.id;
            if (type == 1) {
              postCodePusetprocessingnumber(complement).then((res) => {
                let form = this.form;
                this.postCodegetPocessinglist(form);
                this.complementVisible = false;
                this.$message({
                  type: "success",
                  message: "已成功生成RFID!",
                });
              });
            } else {
              postAdminCodeSetshenqing(complement).then((res) => {
                let form = this.form;
                this.postCodegetPocessinglist(form);
                this.complementVisible = false;
                this.$message({
                  type: "success",
                  message: "已成功添加RFID,请耐心等待审核！",
                });
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消生成RFID",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请输入生成数量",
        });
      }
    },
    // 查看
    onLook(row) {
      this.$router.push({
        name: "ExportCancellation",
        query: { row: JSON.stringify(row) },
      });
    },
    // 采购列表
    async postCodegetPocessinglist(data) {
      this.loading = true;
      this.form = data;
      postCodegetPocessinglist(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.rfidmode {
  display: flex;
}
.cancellationdialogVisible {
  > div:not(:nth-last-child(1)) {
    display: flex;
    margin-top: 20px;
    > div {
      margin-right: 40px;
    }
  }
  > div:nth-last-child(1) {
    margin-top: 20px;
    display: flex;
    align-items: center;
    /deep/ .el-input {
      width: 200px;
    }
    > div:nth-child(3) {
      margin: 0 10px;
      width: 30px;
      height: 1px;
      background: #666;
    }
  }
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.export {
  margin-top: 20px;
  display: flex;
  align-items: center;
  float: right;
  > div {
    margin-right: 20px;
    > span {
      color: #409eff;
      font-size: 18px;
      padding: 0 5px;
    }
  }
}
.WorkingSchedule {
  &-fsgc {
    > .el-button {
      margin-top: 20px;
      float: right;
    }
  }
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
